<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <blockquote class="layui-elem-quote">注意：这主要是管理后台菜单，通常后台基本权限都是与这类菜单相关联的!</blockquote>
            <form target="hide_form" action="{:url('/Menu/updateSort')}" method="post">
                <div class="left mb10">
                    {:u('/Menu/insertMenu', '', '添加菜单', 'load', 'layui-btn-normal', 600, 460)}
                    <button type="submit" class="layui-btn layui-btn-warm">更新排序</button>
                </div>
                <div class="layui-form">
                    <table class="layui-table">
                        <colgroup>
                            <col width="50">
                            <col class="hidden-xs" width="50">
                            <col class="hidden-xs" width="100">
                            <col class="hidden-xs" width="150">
                            <col>
                            <col width="80">
                            <col width="200">
                        </colgroup>
                        <thead>
                        <tr>
                            <td>
                                <input type="checkbox" name="menu_id[]" lay-skin="primary" lay-filter="allChoose">
                            </td>
                            <td class="hidden-xs">ID</td>
                            <td class="hidden-xs">排序</td>
                            <td class="hidden-xs">方法</td>
                            <td>菜单名称</td>
                            <td>状态</td>
                            <td style="text-align: center;">操作</td>
                        </tr>
                        </thead>
                        <tbody>
                        {foreach name="list" item="val1" key="key"}
                        {eq name="val1.parent_id" value="0"}
                        <tr id="node-{$val1.menu_id}" class="parent collapsed">
                            <td>
                                <input type="checkbox" name="menu_id[]" lay-skin="primary" data-id="{$val1.menu_id}">
                                <div class="layui-unselect layui-form-checkbox" lay-skin="primary"><i class="layui-icon"></i></div>
                            </td>
                            <td class="hidden-xs">{$val1.menu_id}</td>
                            <td class="hidden-xs">
                                <input type="text" name="sort[{$val1.menu_id}]" autocomplete="off" class="layui-input" value="{$val1.sort}">
                            </td>
                            <td class="hidden-xs">{$val1.menu_action}</td>
                            <td>{$val1.menu_name}<a class="layui-btn layui-btn-normal layui-btn-xs showSubBtn" data-id="{$val1.menu_id}">+</a></td>
                            <td>
                                {eq name="val1.is_show" value="1"}
                                <button type="button" class="layui-btn layui-btn-normal layui-btn-xs table-list-status" data-status="1" data-id="{$val1.menu_id}">显示</button>
                                {else/}
                                <button type="button" class="layui-btn layui-btn-warm layui-btn-xs table-list-status" data-status="0" data-id="{$val1.menu_id}">隐藏</button>
                                {/eq}
                            </td>
                            <td>
                                {:u('Menu/insertMenu', ['parent_id'=>$val1.menu_id,'is_show'=>1], 'add', 'load', 'layui-btn-normal layui-btn-sm', 600, 460)}
                                {:u('Menu/updateMenu', ['menu_id'=>$val1.menu_id], 'edit', 'load', 'layui-btn-normal layui-btn-sm', 600, 460)}
                                {:u('Menu/deleteMenu', ['menu_id'=>$val1.menu_id], 'delete', 'act', 'layui-btn-danger layui-btn-sm')}
                            </td>
                        </tr>
                        {foreach name="list" item="val2" key="kk"}
                        {eq name="val2.parent_id" value="$val1.menu_id"}
                        <tr id="node-{$val2.menu_id}" class="child-node-{$val1.menu_id} parent collapsed" style="display: none;" parents_id="{$val1.menu_id}">
                            <td>
                                <input type="checkbox" name="menu_id[]" lay-skin="primary" data-id="{$val2.menu_id}">
                                <div class="layui-unselect layui-form-checkbox" lay-skin="primary"><i class="layui-icon"></i></div>
                            </td>
                            <td class="hidden-xs">{$val2.menu_id}</td>
                            <td class="hidden-xs">
                                <input type="text" name="sort[{$val2.menu_id}]" autocomplete="off" class="layui-input" value="{$val2.sort}">
                            </td>
                            <td class="hidden-xs">{$val2.menu_action}</td>
                            <td>
                                <div class="layui-inline">
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;├─{$val2.menu_name}
                                    <a class="layui-btn layui-btn-normal layui-btn-xs showSubBtn" data-id="{$val2.menu_id}">+</a>
                                </div>
                            </td>
                            <td>
                                {eq name="val2.is_show" value="1"}
                                <button type="button" class="layui-btn layui-btn-normal layui-btn-xs table-list-status" data-status="1" data-id="{$val2.menu_id}">显示</button>
                                {else/}
                                <button type="button" class="layui-btn layui-btn-warm layui-btn-xs table-list-status" data-status="0" data-id="{$val2.menu_id}">隐藏</button>
                                {/eq}
                            </td>
                            <td>
                                {:u('Menu/insertMenu', ['parent_id'=>$val2.menu_id,'is_show'=>1], 'add', 'load', 'layui-btn-normal layui-btn-sm', 600, 460)}
                                {:u('Menu/updateMenu', ['menu_id'=>$val2.menu_id,'is_show'=>1], 'edit', 'load', 'layui-btn-normal layui-btn-sm', 600, 460)}
                                {:u('Menu/deleteMenu', ['menu_id'=>$val2.menu_id], 'delete', 'act', 'layui-btn-danger layui-btn-sm')}
                            </td>
                        </tr>
                        {foreach name="list" item="val3" key="kkk"}
                        {eq name="val3.parent_id" value="$val2.menu_id"}
                        <tr id="node-{$val3.menu_id}" class="child-node-{$val2.menu_id} parent collapsed" style="display: none;" parents_id="{$val1.menu_id}">
                            <td>
                                <input type="checkbox" name="menu_id[]" lay-skin="primary" data-id="{$val3.menu_id}">
                                <div class="layui-unselect layui-form-checkbox" lay-skin="primary"><i class="layui-icon"></i></div>
                            </td>
                            <td class="hidden-xs">{$val3.menu_id}</td>
                            <td class="hidden-xs">
                                <input type="text" name="sort[{$val3.menu_id}]" autocomplete="off" class="layui-input" value="{$val3.sort}">
                            </td>
                            <td class="hidden-xs">{$val3.menu_action}</td>
                            <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;├─{$val3.menu_name}</td>
                            <td>
                                {eq name="val3.is_show" value="1"}
                                <button type="button" class="layui-btn layui-btn-normal layui-btn-xs table-list-status" data-status="1" data-id="{$val3.menu_id}">显示</button>
                                {else/}
                                <button type="button" class="layui-btn layui-btn-warm layui-btn-xs table-list-status" data-status="0" data-id="{$val3.menu_id}">隐藏</button>
                                {/eq}
                            </td>
                            <td>
                                {:u('Menu/insertMenu', ['menu_id'=>$val3.menu_id, 'is_show'=>1], 'edit', 'load', 'layui-btn-normal layui-btn-sm', 600, 460)}
                                {:u('Menu/deleteMenu', ['menu_id'=>$val3.menu_id], 'delete', 'act', 'layui-btn-danger layui-btn-sm')}
                            </td>
                        </tr>
                        {/eq}
                        {/foreach}
                        {/eq}
                        {/foreach}
                        {/eq}
                        {/foreach}
                        </tbody>
                    </table>
                </div>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript">
    layui.use(['jquery'], function() {
        let $=layui.jquery; // jquery
        //修改状态
        $('.layui-table').on('click', '.table-list-status', function() {
            let That = $(this);
            let status = That.attr('data-status');
            let menu_id = That.attr('data-id');
            $.post('{:url("/Menu/auditMenu")}', {menu_id:menu_id}, function (result) {
                if (result.status === 1){
                    if(status == 1) {
                        That.removeClass('layui-btn-normal').addClass('layui-btn-warm').html("隐藏").attr('data-status', 0);
                    } else if(status == 0) {
                        That.removeClass('layui-btn-warm').addClass('layui-btn-normal').html("显示").attr('data-status', 1);
                    }
                }
            });
        });
        //栏目展示隐藏
        $('.showSubBtn').on('click', function() {
            let _this = $(this);
            let id = _this.attr('data-id');
            let parent = _this.parents('.parent');
            let child = $('.child-node-' + id);
            let childAll = $('tr[parents_id=' + id + ']');
            if(parent.hasClass('collapsed')) {
                _this.html('-');
                parent.addClass('expanded').removeClass('collapsed');
                child.css('display', '');
            } else {
                _this.html('+');
                parent.addClass('collapsed').removeClass('expanded');
                child.css('display', 'none');
                childAll.addClass('collapsed').removeClass('expanded').css('display', 'none');
                childAll.find('.showSubBtn').html('+');
            }
        });
    });
</script>